<template>
    <mescroll-uni
            top="0"
            @down="downCallback"
            @up="upCallback"
            :down="downOption"
            :up="upOption"
            class="mescroll-flex"
            :fixed="false"
            @init="mescrollInit"
    >
        <view v-if="dataList.length" class="multi-layer-wrapper" v-for="(item, index) in dataList" :key="index">
            <view class="multi-book-title">
                <text class="class-title ellipsis-one">{{item.sortName}}</text>
                <text class="watch-more" @tap="watchMore(item)">查看更多 ></text>
            </view>
            <multi-book idName="sort" :idVal="item.sortId"/>
        </view>
        <view class="multi-book-detail"  v-if="!dataList.length">
            <view class="book-item" @tap="watchBook(item)" v-for="(item, index) in bookList" :key="index">
                <image  mode="aspectFit"
                        :src="item.booksHead"/>
                <text class="ellipsis">{{item.booksName}}</text>
            </view>
        </view>
    </mescroll-uni>
</template>

<script>
    import { getBooks } from '@/util/commonFn'
    import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue";
    import multiBook from './multi-book-card'
    import service from "@/service";
    export default {
        name: "multi-book",
        props: {
            sortId: {
                type: String,
                default: ''
            }
        },
        watch: {
            sortId(){
                this.page = 1;
                this.dataList = []
                this.bookList = []
                this.mescroll && this.mescroll.resetUpScroll();
            }
        },
        data(){
            return{
                isNoSub: false,
                bookList: [],
                dataList: [],
                page: 1,
                limit: 20,
                downOption: {
                    auto: false,
                },
                upOption:{
                    use: true, // 是否启用上拉加载; 默认true
                    auto: true, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
                    page: {
                        num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
                        size: 10 // 每页数据的数量,默认10
                    },
                    noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
                    empty: {
                        icon: 'https://img.thumbrary.com/empty.png',
                        tip: '暂无数据'
                    },
                    offset: 130,
                    textNoMore:'我是有底线的 >_<'
                },
                mescroll: null
            }
        },
        components: {
            MescrollUni, multiBook
        },
        methods: {
            mescrollInit(mescroll) {
                this.mescroll = mescroll;
            },
            downCallback(mescroll){
                this.dataList = [];
                if(this.isNoSub){
                    this.bookList = [];
                }
                this.page = 1;
                mescroll.resetUpScroll();
            },
            upCallback(mescroll){
                this.page = mescroll.num;
                if(this.isNoSub){
                    this.getBooks();
                    return;
                }
                this.getClassSorts(this.sortId);
            },
            // 查看图书详情
            watchBook(item){
                uni.navigateTo({
                    url: `../components/gw-book-detail?booksId=${item.booksId}`
                })
            },
            // 查看分类详情
            watchMore(item){
                uni.navigateTo({
                    url: `./class-search-list?idName=sort&id=${item.sortId}&sortType=${this.sortId}`
                })
            },
            getBooks(){
                let that = this;
                getBooks({
                    page: this.page,
                    limit: this.limit,
                    sortId: this.sortId
                }).then(result=>{
                    let data = result.data || [];
                    that.page > 1 ? that.bookList.push(...data) : that.bookList = data;;
                    that.mescroll && that.mescroll.endBySize(data.length, result.num);
                })
            },
            getClassSorts (sortId) {
                uni.showLoading({
                    title: '加载中',
                });
                service.homeService.getClassSorts({
                    data: {
                        sortId: sortId,
                        page: this.page,
                        limit: this.limit
                    },
                    success: res => {
                        uni.hideLoading();
                        if (res.code === 200) {
                            let data = res.result.data || [];
                            this.dataList = data || [];
                            if(!data.length && this.page === 1){
                                this.isNoSub = true;
                                this.getBooks();
                                return;
                            }
                            this.page > 1 ? this.dataList.push(...data) : this.dataList = data;
                            this.mescroll && this.mescroll.endBySize(data.length, res.result.num);
                        }
                    },
                    fail: ()=>{
                        uni.hideLoading();
                    }
                });
            },
        }
    }
</script>

<style scoped lang="scss">
    .multi-layer-wrapper{
        margin-bottom: 40rpx;
        .multi-book-title{
            display: flex;
            justify-content: space-between;
            .class-title{
                font-size:32rpx;
                font-weight:bold;
                color:rgba(51,51,51,1);
                flex: 0 0 340rpx;
            }
            .watch-more{
                font-size:24rpx;
                color:rgba(153,153,153,1);
            }
        }
    }
    .multi-book-detail{
        margin-top: 20rpx;
        display: flex;
        .book-item{
            flex: 0 0 250rpx;
            margin-right: 13rpx;
            &:last-of-type{
                margin-right: 0;
            }
            image{
                width: 100%;
                height: 187rpx;
                border-radius: 4rpx;
            }
            text{
                font-size:24rpx;
                font-family:PingFang SC;
                font-weight:400;
                line-height:33rpx;
                color:rgba(51,51,51,1);
                -webkit-line-clamp: 2;
            }
        }
    }
</style>
